<template>
  <div class="bill-box pd-24 fx-full bg-fff bd-rd-12 mg-bt-16 of-y-sr fx fx-cl">
    <div class="fx-bt-ct">
      <div class="line-title">工单信息</div>
      <div
        class="fx-ct-ct cs-pt"
        v-show="dataList.length"
        @click="jumpHandle(undefined)"
      >
        <div class="ft-14 cr-pm pd-rt-4">更多</div>
        <img class="ic-12" src="@/assets/icons/right_1.png" />
      </div>
    </div>
    <div
      class="fx-cl of-y-sr of-x-hd fx-full fx mg-lt--8 mg-rt--8 pd-tp-4 pd-bt-4"
    >
      <div
        class="order-item pd-12 cs-pt mg-lt-8 mg-rt-8 bd-rd-8 ts-al"
        v-for="item in dataList"
        :key="item.id"
        @click="jumpHandle(item.workOrderCode)"
      >
        <div class="ft-14 fw-500 lh-22 cr-bk-9 mg-bt-4 of-np">
          生产工单：{{ item.workOrderCode }}
        </div>
        <div class="fx-bt-ct mg-bt-8">
          <div class="fx-full fx-sk ft-14 lh-22 cr-bk-6 of-np mg-rt-24">
            物料：{{ item.materialName }}
          </div>
          <div class="fx-full fx-sk ft-14 lh-22 cr-bk-6 of-np">
            订单量：{{ item.planNum }}{{ item.unitCode }}
          </div>
        </div>
        <el-progress
          :percentage="item.percentage"
          :color="item.color"
          define-back-color="#F8F8F8"
          :show-text="false"
        ></el-progress>
        <div class="ft-12 lh-20 cr-bk-4 mg-tp-4">
          截止日期：{{ item.planEndTime }}
        </div>
      </div>
      <div class="fx-ct-ct fx-full" v-if="!dataList.length">
        <img src="@/assets/common/empty_icon.png" class="empty-table-img" />
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderList } from "@/api/production/workOrderManage";
import { mapGetters } from "vuex";
export default {
  name: "orderBox",
  computed: {
    ...mapGetters(["allMenu"]),
  },
  data: () => ({
    dataList: [],
  }),
  methods: {
    jumpHandle(val) {
      const path = "/production/workOrderManage";
      const pathObj = this.$findByProperty(this.allMenu, "path", path);
      if (!pathObj)
        return this.$message.warning("你无查看生产工单的权限，请联系管理员");
      this.$router.push({
        path: "/production/workOrderManage",
        query: {
          workOrderCode: val,
        },
      });
    },
    customColor() {
      return "#00A870";
    },
    checkTime(start, end) {
      let percentage = 0;
      if (!start || !end) return percentage;
      const startTime = new Date(start).getTime();
      const endTime = new Date(end).getTime();
      const currentTime = new Date().getTime();
      if (endTime < currentTime) return (percentage = 100);
      if (startTime > currentTime) return (percentage = 0);
      const totalDuration = endTime - startTime;
      if (totalDuration <= 0) return (percentage = 0);
      const remainingTime = currentTime - startTime;
      percentage = Math.max(0, (remainingTime / totalDuration) * 100);
      return percentage;
    },
    getListHandle() {
      getOrderList({ size: 20, current: 1 }).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.dataList = data.records.filter(
          (item) => item.state == 10 || item.state == 20
        );
        this.dataList.forEach((item) => {
          // item.percentage = this.checkTime(
          //   item.planStartTime,
          //   item.planEndTime
          // );
          if (item.completeNum != "-") {
            item.percentage = Math.max(
              0,
              (item.completeNum / item.planNum) * 100
            );
            item.color = this.customColor(item.percentage);
          }
        });
        this.dataList.sort((a, b) => b.percentage - a.percentage);
      });
    },
  },
  mounted() {
    // this.getListHandle();
  },
};
</script>

<style lang="scss" scoped>
.order-item {
  &:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
  }
}
</style>
